<template>
    <view class="order-submit-item" v-if="item && item.Amount > 0" :class="{ no: data.Discount <= 0 }">
        <view class="item-top">
            <image v-if="!getAppSet().isHideImg" class="product-img"
                :src="item.V_ThumbnailUrl160 ? easyGetImgUrl(item.V_ThumbnailUrl160) : '/static/img/no-img.jpg'"
                mode="aspectFill"></image>
            <view class="product-info">
                <text class="product-name"><text v-if="gift == 1" class="gift">【赠品】</text>{{ item.V_Title }}</text>
                <button class="btn btn-yellow-hollow" v-if="item.PolicyList && item.PolicyList.length > 0"
                    @click="open">
                    <image class="icon" src="@/static/icon/coupon@2x1.png"></image>
                    <text class="policy-text">{{ userPolicy.Name }}</text>
                    <text class="arrow" :class="isShowSelect ? 'arrow-up' : 'arrow-down'"></text>
                </button>
                <view class="price-group">
                    <text style="font-size: 28rpx;">成本价：¥{{ costPrice }}</text>
                    <text style="font-size: 28rpx;">售 价：¥{{ item.oldPrice }}</text>
                </view>
            </view>
        </view>
        <view class="item-center">
            <view class="pro-item">
                <view class="left">
                    <text class="label" v-if="item.V_AttributeNameValue"><text class="specification">{{
                        item.V_AttributeNameValue ? item.V_AttributeNameValue : "默认规格"
                            }}</text></text>
                    <text class="label">
                        <text class="price-bold">￥{{ item.V_GradePrice }}</text>
                        <text class="value product-num">x{{ item.Amount }}{{ item.UnitName ? item.UnitName :
                            item.RationUnit }}</text>
                        <text class="edit" @click="edit()" v-if="isChangPrice == 1">修改</text>
                    </text>
                </view>
                <view class="right">
                    <text class="value price-text">小计：￥{{ item.TotalMoney }}</text>
                </view>
            </view>
            <image class="gai" src="@/static/img/gai.png" v-if="item.IsChangePrice"></image>
        </view>
        <view class="item-bottom" v-if="false">
            <input placeholder="商品备注信息" />
        </view>
        <uni-popup ref="popPolicy" type="bottom" @change="changePop" background-color="#fff" :safe-area="false">
            <view class="pop-main">
                <view class="title">
                    <text class="title-text">修改促销</text>
                    <uni-icons class="icon-close" size="48" type="closeempty" @click="close"></uni-icons>
                </view>
                <view class="main">
                    <view class="policy-item" v-for="(item, index) in item.PolicyList" :key="index"
                        @click="select(item)">
                        <text class="policy-name">{{ item.Name }}</text>
                        <uni-icons class="icon" :type="userPolicy.ID == item.ID ? 'circle-filled' : 'circle'" size="36"
                            :customIcons="userPolicy.ID == item.ID ? 'icon-green' : ''"></uni-icons>
                    </view>
                </view>
            </view>
        </uni-popup>
        <view class="remark" @click="goUrl(item)" v-if="false">
            <view>备注</view>
            <view>
                <text v-if="item.Remark || item.CustomForm">已备注</text>
                <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
            </view>
        </view>
        <!-- <uni-popup ref="popTip" type="center" :animation="false" :mask-click="false">
			<view class="pop-return-box">
				<view class="pop-return-title">运费明细</view>
				<view class="yunfei-main">
					<view v-for="(item,index) in postDesc" v-if="item.Explain">{{index+1}}、{{item.Explain}}</view>
				</view>
				<view class="pop-action">
					<view @click="remarkClose">取消</view>
		
				</view>
			</view>
		</uni-popup> -->
        <uni-popup ref="popTip" type="center" :animation="false" :mask-click="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>{{ editDate.V_Title }}</text>
                </view>
                <view class="pop-return-li">
                    <view>数量：</view>
                    <input type="digit" v-model="editDate.Amount" />
                </view>
                <!-- 针对芒果红了特别处理 -->
                <view class="pop-return-li">
                    <view>单价：</view>
                    <input type="digit" v-model="editDate.V_GradePrice" @input="keycouponAmount($event)" />
                </view>
                <view class="pop-return-li">
                    <view>小计：</view>
                    <view class="strong">￥{{ (editDate.V_GradePrice * editDate.Amount).toFixed(4) }}</view>
                </view>
                <view class="pop-action">
                    <view @click="popTipClose">取消</view>
                    <view @click="popTipConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { UpdateCar } from "@/service/api/user.js"
export default {
    props: {
        item: {
            type: Object,
            default: {},
        },
        data: {
            type: Object,
            default: {},
        },
        gift: {
            type: Number,
            default: 0,
        },
        isChangPrice: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            userPolicy: {},
            isShowSelect: false,
            editDate: {},
        }
    },
    watch: {
        item(val) {
            this.item = val
            this.$emit("update:item", val)
        },
    },
    computed: {
        costPrice() {
            console.log("this.item===", this.item)
            if (this.item.WorkerPrice) {
                return this.item.WorkerPrice
            } else {
                return this.item.CostPrice
            }
        },
    },
    mounted() {
        this.getPolicy()
        if (!this.item.oldPrice) {
            this.$set(this.item, "oldPrice", this.item.V_GradePrice)
        }
    },
    methods: {
        edit() {
            this.editDate = JSON.parse(JSON.stringify(this.item))
            this.$refs.popTip.open()
        },
        popTipClose() {
            this.$refs.popTip.close()
        },
        popTipConfirm() {
            if (this.editDate.Amount == "") {
                this.easyToast("数量不能为空")
                return
            }
            if (this.editDate.V_GradePrice < this.editDate.CostPrice) {
                this.easyToast("不能低于成本价" + this.editDate.CostPrice + "元")
                return
            }
            if (this.editDate.V_GradePrice == "" || this.editDate.V_GradePrice <= 0) {
                this.easyToast("请输入正确的单价")
                return
            }
            this.item.V_GradePrice = +this.editDate.V_GradePrice
            this.item.Price = +this.editDate.V_GradePrice
            this.item.Amount = +this.editDate.Amount
            this.item.TotalMoney = +(Number(this.editDate.V_GradePrice) * Number(this.editDate.Amount)).toFixed(2)
            this.item.IsChangePrice = true
            this.$emit("changeSuc")
            this.updateCar(this.item)
            this.popTipClose()
            this.$forceUpdate()
        },
        updateCar(item) {
            let param = {
                carId: item.ID,
                amount: item.Amount,
                price: item.V_GradePrice,
            }
            UpdateCar(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("修改成功")
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        keycouponAmount(e) {
            let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
            console.log(val)
            if (!val) {
                this.couponAmount = ""
                return
            }
            var reg = /[^\d.]/g

            // 只能是数字和小数点，不能是其他输入
            val = val.replace(reg, "")
            // // 保证第一位只能是数字，不能是点
            val = val.replace(/^\./g, "")
            // // 小数只能出现1位
            val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".")
            // // 小数点后面保留2位
            // val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")
            // // 小数点后面保留4位
            val = val.replace(/^(\-)*(\d+)\.(\d{0,4}).*$/, '$1$2.$3')
            console.log(val)
            this.$nextTick(() => {
                this.editDate.V_GradePrice = val
            })
        },
        // OrderFormTemplateId
        goUrl(item) {
            let productdata = {
                ProductId: item.ProductId,
                Amount: item.Amount,
                UnitId: item.UnitId,
                UnitName: item.DefaultUnit,
                SkuId: item.SkuId,
                Ratio: item.Ratio,
                CustomForm: item.CustomForm,
                OrderFormTemplateId: item.OrderFormTemplateId,
                Remark: item.Remark,
            }
            this.easyGoTo(
                "/pages_shop/packet/order/remark?productdata=" + encodeURIComponent(JSON.stringify(productdata)),
            )
        },
        getPolicy() {
            if (this.item.PolicyList) {
                this.item.PolicyList.forEach((e) => {
                    if (e.ID == this.data.PolicyId) {
                        this.userPolicy = e
                    }
                })
            }
        },
        select(item) {
            let obj = {
                CarId: this.item.ID,
                PolicyId: item.ID,
            }
            this.userPolicy = item
            this.close()
            this.$emit("changePolicy", obj)
        },
        close() {
            this.$refs.popPolicy.close()
        },
        open() {
            this.$refs.popPolicy.open()
        },
        changePop(e) {
            this.isShowSelect = e.show
        },
    },
}
</script>

<style lang="scss">
.order-submit-item {
    display: flex;
    flex-direction: column;
    border-bottom: 12rpx solid #f1f1f1;
    margin-left: -24rpx;
    margin-right: -24rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;
    padding-bottom: 24rpx;

    .item-top {
        display: flex;
        flex-direction: row;
        margin-top: 24rpx;

        .product-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: $border-radius-10;
            margin-right: 20rpx;
        }

        .product-info {
            display: flex;
            flex-direction: column;
            flex: 1;

            .product-name {
                font-weight: 700;
                font-size: $font-size-28;
                color: $app-color-text-main;
                flex: 1;
                margin-bottom: 14rpx;

                .gift {
                    color: $app-color-main;
                }
            }

            .price-group {
                display: flex;
                justify-content: space-between;
            }

            .policy-text {
                flex: 1;
                padding-right: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                display: flex;
                color: #fa6400;
            }

            .arrow {
                border: solid #333333;
                border-width: 0 1px 1px 0;
                padding: 3px;
            }

            .arrow-down {
                margin-top: -4rpx;
            }

            .btn {
                flex-direction: row;
                font-size: $font-size-20;
                margin-left: 0;
            }
        }

        .btn-yellow-hollow {
            height: 48rpx;
            margin-bottom: 20rpx;
            width: auto;
            border-radius: 4rpx;
            border-color: rgba(0, 0, 0, 0);
            background: #ffffff;
            border: 1rpx solid #fa6400;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }

    .item-center {
        background: #f7f7f7;
        padding: 14rpx 24rpx;
        margin-top: 20rpx;
        position: relative;

        .item-cell {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-bottom: 8rpx;

            .label {
                display: flex;
                flex: 1;
                color: $app-color-text-tip;
            }

            .value {
                display: flex;
                justify-content: flex-end;
            }
        }

        .gai {
            width: 60rpx;
            height: 60rpx;
            position: absolute;
            right: 0;
            top: -35rpx;
        }
    }

    .item-bottom {
        border-radius: $border-radius-10;
        padding: $app-page-padding;
        background: $app-color-input-bg;

        input {
            font-size: $font-size-24;
            color: $app-color-text-tip;
        }
    }
}

.policy-item {
    .policy-name {
        display: flex;
        flex: 1;
    }
}

.total-price {
    color: $app-color-main;
}

.product-num {
    color: $color-gray-1;
    font-size: 28rpx;
}

.edit {
    padding: 5rpx 12rpx;
    border-radius: 10rpx;
    color: $app-color-main;
    border: 1rpx solid $app-color-main;
    margin-left: 24rpx;
}

.pro-item {
    display: flex;
    flex-direction: row;

    .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 4rpx;

        .label {
            font-size: 26rpx;
            color: $app-color-text-tip;
            padding: 6rpx 0;

            text {
                font-size: 26rpx;
            }

            .specification {
                font-size: 30rpx;
                color: $color-gray-1;
            }
        }

        .price-bold {
            color: #000;
            font-size: 32rpx;
            font-weight: bold;
            padding-right: 14rpx;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .price-text {
            font-size: $font-size-28;
            color: $color-gray-1;
        }
    }
}

.remark {
    display: flex;
    padding: 24rpx 0;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;

    text {
        color: $color-gray-3;
    }
}

.pop-return-box {
    background: $color-white;
    border-radius: $border-radius-10;
    padding: $app-page-padding;
    width: 600rpx;
    margin-left: 51rpx;

    .pop-return-title {
        display: flex;
        justify-content: center;

        // padding: 0;
        // padding-bottom: 10rpx;
        text {
            font-weight: 700;
            font-size: 34rpx;
        }
    }

    .pop-return-li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10rpx;

        input {
            flex: 1;
            height: 80rpx;
            background: #f0f0f0;
            border-radius: 10rpx;
            font-size: 34rpx;
            color: #000;
            padding-left: 20rpx;
        }

        .strong {
            font-weight: bold;
            font-size: 36rpx;
            color: $app-color-main;
        }
    }

    .pop-action {
        border-top: 1rpx solid rgba(0, 0, 0, 0.1);
        margin: 20rpx -24rpx -24rpx -24rpx;
        height: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        view {
            width: 50%;
            text-align: center;
            height: 110rpx;
            line-height: 110rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: $app-color-main;
        }

        &>view:first-child {
            color: $color-gray-1;
            border-right: 1rpx solid rgba(0, 0, 0, 0.1);
        }
    }
}
</style>
